<template>
    <div class="f-header">
        <span class="logo">
            <el-icon style="margin-right:5px">
                <Goods />
            </el-icon>
            嗨购管理平台
        </span>

        <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
            <Fold  v-if="$store.state.asideWidth==='250px'"/>
            <Expand v-else />
        </el-icon>
        <el-tooltip effect="dark" content="刷新" placement="bottom-start">
            <el-icon class="icon-btn" @click=RefreshPage>
                <RefreshRight />
            </el-icon>
        </el-tooltip>

        <div class="right" style="margin-left: auto">

            <el-tooltip effect="dark" content="全屏" placement="bottom-start">
                <el-icon class="icon-btn" @click="toggle">
                    <FullScreen v-if="!isFullscreen" />
                    <Aim v-else />
                </el-icon>
            </el-tooltip>

            <el-dropdown style="margin-right: 10px;" @command="handchange">
                <span class="flex  items-center text-light-50">
                    <el-avatar style="margin-right: 10px; margin-left: 50px;" :size="25" :src="$store.state.user.avatar" />
                    {{ $store.state.user.username }}

                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="rPassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="Outlogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <FormDrawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
            <el-form-item prop="oldpassword" label="旧密码">
                <el-input v-model="form.oldpassword" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="新密码">
                <el-input v-model="form.password" type="password" placeholder="请输入新密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input v-model="form.repassword" type="password" placeholder="请确认密码">
                </el-input>
            </el-form-item>
        </el-form>
</FormDrawer>
</template>
<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router"
import { useStore } from 'vuex'
import { updatepassword ,logout} from "~/api/manager"
import { toast ,showModal} from '~/composables/util'
import { useFullscreen } from '@vueuse/core'

function handchange(res) {
    switch (res) {
        case "rPassword":
            // showPassword.value = true
            formDrawerRef.value.open()
            break;
        case "Outlogin":
            backlogout()
            break;
    }

}
// 刷新页面
const RefreshPage = () => location.reload()
// 全屏 先安装vueuse包 npm i @vueuse/core  
const {
    // 是否全屏状态
    isFullscreen,
    // 切换全屏
    toggle
} = useFullscreen()

const router = useRouter()
const store = useStore()
// 修改密码
const formDrawerRef =ref(null)
const form = reactive({
    oldpassword: "",
    repassword: "",
    password: ""
})
// 表单验证
const rules = {
    oldpassword: [{
        required: true,
        message: '旧密码不能为空',
        trigger: 'blur'

    }],
    password: [{
        required: true,
        message: '新密码不能为空',
        trigger: 'blur'
    }],
    repassword: [{
        required: true,
        message: '确认密码不能为空',
        trigger: 'blur'
    }],
}

const formRef = ref(null)

const onSubmit = () => {
    formRef.value.validate((valid) => {
        // console.log("valid",valid);
        if (!valid) {
            return false
        }
        formDrawerRef.value.showLoading()
        updatepassword(form).then(res => {
            toast("修改密码成功，请重新登录")
            // 退出登录
            store.dispatch("logout")
            // 跳转回登录页面
            router.push("/login")

        }).finally(() => {
            formDrawerRef.value.hideLoading()
        })

    })
}

// 退出登录
function backlogout() {
    showModal("是否要退出登录？").then(res => {
        logout().finally(() => {

            store.dispatch("logout")
            // 跳转回登录页面
            router.push("/login")
            // 提示退出登录
            toast("退出登录成功")
        })
    })
}
</script>
<style scoped>
.f-header {
    @apply flex items-center bg-indigo-500 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
    z-index: 1000;
}

.logo {
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 100;
}

.icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}

.icon-btn:hover {
    @apply bg-indigo-600
}

.right {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>